<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建图片 - AI 画廊</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://unpkg.com/tdesign-miniprogram@1.2.2/dist/style/index.wxss">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            height: 100vh;
            overflow-y: auto;
        }
        /* TDesign 风格模拟 */
        .t-header {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 500;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 10;
            border-bottom: 1px solid #eee;
        }
        .t-textarea-wrapper {
            background-color: #fff;
            padding: 16px;
            margin: 16px;
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .t-textarea {
            width: 100%;
            min-height: 120px;
            padding: 12px;
            border: 1px solid #eee;
            border-radius: 8px;
            resize: none;
            font-size: 16px;
            line-height: 1.5;
            box-sizing: border-box;
        }
        .t-textarea.negative {
            min-height: 80px;
            margin-top: 12px;
            border: 1px solid #ffebee;
            background-color: #fff8f8;
        }
        .t-textarea::placeholder {
            color: #999;
        }
        .t-label {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
            display: block;
        }
        .t-label.negative {
            color: #e53935;
            margin-top: 16px;
        }
        .t-button {
            width: calc(100% - 32px);
            height: 44px;
            margin: 16px;
            background-color: #0052d9;
            color: white;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 500;
        }
        .t-button.secondary {
            background-color: #fff;
            color: #0052d9;
            border: 1px solid #0052d9;
        }
        .t-button.disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .t-image-preview {
            width: calc(100% - 32px);
            height: 300px;
            margin: 16px;
            background-color: #eee;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .t-image-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .t-image-preview .placeholder {
            color: #999;
            font-size: 16px;
        }
        .t-action-bar {
            display: flex;
            justify-content: space-between;
            width: calc(100% - 32px);
            margin: 0 16px;
        }
        .t-action-bar .t-button {
            width: 48%;
            margin: 0;
        }
        .t-chips {
            display: flex;
            flex-wrap: wrap;
            padding: 0 16px;
            margin-bottom: 16px;
        }
        .t-chip {
            background-color: #f0f5ff;
            color: #0052d9;
            padding: 4px 12px;
            border-radius: 16px;
            margin-right: 8px;
            margin-bottom: 8px;
            font-size: 14px;
        }
        .t-chip.negative {
            background-color: #ffebee;
            color: #e53935;
        }
        .status-bar {
            height: 44px;
            background-color: #fff;
        }
        .t-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255,255,255,0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }
        .t-loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0,82,217,0.1);
            border-left-color: #0052d9;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 16px;
        }
        .t-loading-text {
            color: #333;
            font-size: 16px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="status-bar"></div>
    <div class="t-header">创建图片</div>
    
    <div class="t-textarea-wrapper">
        <label class="t-label">描述你想要的图片</label>
        <textarea class="t-textarea" id="promptInput" placeholder="试试描述: 主角 + 在哪里 + 做什么 + 像什么风格? 例如: 宇航员坐在月球表面看书，写实风格"></textarea>
        
        <label class="t-label negative">不想要的内容（可选）</label>
        <textarea class="t-textarea negative" id="negativePromptInput" placeholder="描述你不希望图片中出现的内容，例如: 模糊, 扭曲, 文字, 低质量"></textarea>
    </div>
    
    <div class="t-chips">
        <div class="t-chip" onclick="addChip('写实', false)">写实</div>
        <div class="t-chip" onclick="addChip('动漫', false)">动漫</div>
        <div class="t-chip" onclick="addChip('电影感', false)">电影感</div>
        <div class="t-chip" onclick="addChip('梦幻', false)">梦幻</div>
        <div class="t-chip" onclick="addChip('科幻', false)">科幻</div>
        <div class="t-chip" onclick="addChip('水彩', false)">水彩</div>
    </div>
    
    <div class="t-chips">
        <div class="t-chip negative" onclick="addChip('模糊', true)">模糊</div>
        <div class="t-chip negative" onclick="addChip('低质量', true)">低质量</div>
        <div class="t-chip negative" onclick="addChip('扭曲', true)">扭曲</div>
        <div class="t-chip negative" onclick="addChip('文字', true)">文字</div>
        <div class="t-chip negative" onclick="addChip('噪点', true)">噪点</div>
        <div class="t-chip negative" onclick="addChip('过度曝光', true)">过度曝光</div>
    </div>
    
    <div class="t-button" onclick="generateImage()">生成图片</div>
    
    <div class="t-image-preview" id="imagePreview">
        <div class="placeholder">图片将在这里显示</div>
    </div>
    
    <div class="t-action-bar" id="actionBar" style="display: none;">
        <div class="t-button secondary" onclick="resetAll()">重新生成</div>
        <div class="t-button" onclick="publishImage()">发布</div>
    </div>
    
    <!-- 加载中动画 -->
    <div class="t-loading" id="loading" style="display: none;">
        <div class="t-loading-spinner"></div>
        <div class="t-loading-text">AI正在作画中...</div>
    </div>

    <script>
        // 添加标签词到输入框
        function addChip(text, isNegative) {
            const inputId = isNegative ? 'negativePromptInput' : 'promptInput';
            const input = document.getElementById(inputId);
            if (input.value.trim() === '') {
                input.value = text;
            } else {
                input.value = input.value + '，' + text;
            }
        }
        
        // 生成图片
        function generateImage() {
            const positivePrompt = document.getElementById('promptInput').value.trim();
            const negativePrompt = document.getElementById('negativePromptInput').value.trim();
            
            if (positivePrompt === '') {
                alert('请输入描述内容');
                return;
            }
            
            // 显示加载中
            document.getElementById('loading').style.display = 'flex';
            
            // 模拟生成过程
            setTimeout(() => {
                // 存储提示词到localStorage，以便在结果页面中使用
                localStorage.setItem('positivePrompt', positivePrompt);
                localStorage.setItem('negativePrompt', negativePrompt);
                localStorage.setItem('imageId', Math.floor(Math.random() * 1000));
                
                // 跳转到结果页面
                window.location.href = 'result.html';
            }, 2000);
        }
        
        // 发布图片
        function publishImage() {
            // 显示加载中
            document.getElementById('loading').style.display = 'flex';
            document.getElementById('loading').querySelector('.t-loading-text').textContent = '正在发布...';
            
            // 模拟发布过程（1秒后跳转）
            setTimeout(() => {
                // 发布成功，显示提示（可选）
                alert('发布成功！');
                
                // 重置状态
                resetAll();
                
                // 隐藏加载中
                document.getElementById('loading').style.display = 'none';
                
                // 如果在iframe中，这里只是模拟跳转提示
                alert('将跳转到首页');
            }, 1000);
        }
        
        // 重置状态
        function resetAll() {
            const imagePreview = document.getElementById('imagePreview');
            imagePreview.innerHTML = '<div class="placeholder">图片将在这里显示</div>';
            
            document.getElementById('actionBar').style.display = 'none';
            document.getElementById('promptInput').value = '';
            document.getElementById('negativePromptInput').value = '';
        }
    </script>
</body>
</html> 